<template>
  <div class="statistics-Detail">
    <head-top head-title="投票统计" hidden='true' go-back="true"></head-top>
    <div class="fixed" ref="fixed">
      <ul class="address">
        <li class="border-bottom wrapper" @click="goyuan" v-if="yuanList.length">
          <div class="yuan">
            <span>苑：</span>
            <span class="sdefault" v-show="!yuanValue">请选择苑</span>
            <span class="sdefault1" v-show="yuanValue">{{yuanValue}}</span>
          </div>
          <div class="img">
            <img src="../home/images/fanhui1@2x.png" alt="">
          </div>
        </li>
        <li class="border-bottom wrapper" @click="gozhuang">
          <div class="zhuang">
            <span>幢：</span>
            <span class="sdefault" v-show="!zhuangValue">请选择幢</span>
            <span class="sdefault1" v-show="zhuangValue">{{zhuangValue}}幢</span>
          </div>
          <div class="img">
            <img src="../home/images/fanhui1@2x.png" alt="">
          </div>
        </li>
        <li class="wrapper" @click="godanyuan">
          <div class="danyuan">
            <span>单元：</span>
            <span class="sdefault" v-show="!danyuanValue">请选择单元</span>
            <span class="sdefault1" v-show="danyuanValue">{{danyuanValue}}单元</span>
          </div>
          <div class="img">
            <img src="../home/images/fanhui1@2x.png" alt="">
          </div>
        </li>
      </ul>
      <div class="toupiao-tongji border-bottom">
        <span class="text">投票统计</span>
        <span class="look-vote" @click="lookVoteDetail">查看票数详情</span>
      </div>
      <ul class="nav">
        <li v-for="(item,index ) in dataList" :key="index" @click="clickContent(index)"><span
          :class="{'text': i === index}">{{item.name}}({{item.count || 0}})</span></li>
      </ul>
    </div>
    <div class="nav-wrapper">
      <!--现场未投票-->
      <form class="nav-container" id="form1">
        <ul class="toupiao-wrapper" ref="weitoupiao" v-show="i===0">
          <!--更新后的代码-->
          <li ref="lit" class="tou-wrapper2 border-bottom-last" v-for="(item,index) in noVote" :key="index">
            <div class="left">
              <span>{{item.name}}室</span>
            </div>
            <div class="jilu">
              <p @click="$router.push(`/my/VisitRecords/${item.id}/${voteId}/${newold}`)">拜访记录</p>
              <div class="right_box">
                <div class="right">
                  <div class="wei-color" :ref="'noVoteText'+index">未投票</div>
                  <input class="wei-input1" @click="selectedVote($event,index)" :ref="'noVote'+index"
                         type="checkbox"
                         name="id" :value="`${3}_${item.id}`"
                         :id="item.id">
                  <label :for="item.id"></label>
                </div>
                <div class="right2">
                  <div class="wei-color" :ref="'noSendText'+index">未送票</div>
                  <input class="wei-input2" @click="selectedSend($event,index)" :ref="'noSend'+index"
                         type="checkbox"
                         name="ids" :value="`${2}_${item.id}`"
                         :id="`${item.id}s`">
                  <label :for="`${item.id}s`"></label>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </form>
      <!--现场未回收-->
      <form class="nav-container" id="form2">
        <ul class="toupiao-wrapper" ref="weiRecycle" v-show="i===1">
          <!--更新后的代码-->
          <li ref="reli" class="tou-wrapper border-bottom-last" v-for="(item,key) in noRecycle" :key="key">
            <div class="left"><span>{{item.name}}室</span></div>
            <div class="jilu">
              <p @click="$router.push(`/my/VisitRecords/${item.id}/${voteId}/${newold}`)">拜访记录</p>
              <div class="right_box">
                <div class="right3">
                  <div class="wei-color">未回收</div>
                  <input class="wei-input" @click="selectedRecycle($event,key)" type="checkbox" name="idr"
                         :value="`${3}_${item.id}`"
                         :id="`${item.id}r`">
                  <label :for="`${item.id}r`"></label>
                </div>
              </div>
            </div>
            <!--<div class="right3">
              <div class="wei-color">未回收</div>
              <input class="wei-input" @click="selectedRecycle($event,key)" type="checkbox" name="idr"
                     :value="`${3}_${item.id}`"
                     :id="`${item.id}r`">
              <label :for="`${item.id}r`"></label>
            </div>-->
          </li>
        </ul>
      </form>
      <!--现场已投票--（之前是电话投票）-->
      <form class="nav-container" id="form3">
        <ul class="toupiao-wrapper" ref="weiSend" v-show="i===2">
          <li ref="lit" class="tou-wrapper2 border-bottom-last" v-for="(item,yindex) in yesVote" :key="yindex">
            <div class="left">
              <span>{{item.name}}室</span>
            </div>
            <div class="jilu">
              <p @click="$router.push(`/my/VisitRecords/${item.id}/${voteId}/${newold}`)">拜访记录</p>
              <div class="right_box2">
                <div class="yi_right">
                  <span>已投</span>
                  <img src="./images/yitou@2x.png" alt="">
                </div>
              </div>
            </div>
          </li>

        </ul>
      </form>
    </div>
    <div class="btn_list">
      <button class="btn1" v-show="!showVote" @click="refreshBtn">刷新</button>
      <button class="btn2" v-show="!showVote" @click="goSubmit">确认提交</button>
    </div>
    <!--苑，幢，单元选择-->
    <mt-popup
      v-model="yuanVisible"
      popup-transition="popup-fade">
      <ul class="yuan-list">
        <li class="same border-bottom-last" v-for="(item, index) in yuanList" :key="'o'+index"
            @click="selectYuan(item.id, item.name)">{{item.name}}
        </li>
      </ul>
    </mt-popup>
    <mt-popup
      v-model="zhuangVisible"
      popup-transition="popup-fade">
      <ul class="yuan-list">
        <li class="same border-bottom-last" v-for="(item, index) in zhuangList" :key="'t'+index"
            @click="selectZhuang(item.id, item.name)" v-show="yid===item.pid">{{item.name}}幢
        </li>
        <li class="same border-bottom-last" v-for="(item, index) in zhuangList" :key="'s'+index"
            @click="selectZhuang(item.id, item.name)" v-show="yuanList.length===0">{{item.name}}幢
        </li>
      </ul>
    </mt-popup>
    <mt-popup
      v-model="danyuanVisible"
      popup-transition="popup-fade">
      <ul class="yuan-list">
        <li class="same border-bottom-last" v-for="(item, index) in danyuanList" :key="index"
            @click="selectDanyuan(item.id, item.name)" v-show="zid===item.pid">{{item.name}}单元
        </li>
      </ul>
    </mt-popup>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import $ from 'jquery'
  import { getAreas, getVote, submitVote } from '../../api/toupiaotongji.js'
  // import { getAreas, getVote } from '../../api/toupiaotongji.js'
  import { Toast } from 'mint-ui'
  import { saveAreasName, loadAreasName } from '../../common/js/cache.js'

  export default {
    name: 'StatisticsDetail',
    data () {
      return {
        newold: {
          type: String // 判断新老版本投票
        },
        voteId: '',
        dataList: [{'name': '现场未投票'}, {'name': '现场未回收'}, {'name': '现场已投票'}],
        // dataList: [{'name': '现场未投票'}, {'name': '现场未回收'}],
        i: 0,
        showVote: false,
        yuanVisible: false,
        danyuanVisible: false,
        zhuangVisible: false,
        yuanList: [],
        danyuanList: [],
        zhuangList: [],
        yid: -1,
        zid: -1,
        did: -1,
        yuanValue: '',
        zhuangValue: '',
        danyuanValue: '',
        voteStr: '',
        sendStr: '',
        recycleStr: '',
        alreadyVote: [],
        noVote: [],
        noSend: [],
        noRecycle: [],
        yesVote: [],
        status: 4,
        selData: [],
        pageType: '',
        selectIndex: '', // 存放点击选择列的index
        emptyArr: [], // 现在未投票
        emptyArr2: [], // 现场未回收
        emptyArr3: [] // 电话投票
      }
    },
    created () {
      this.voteId = this.$route.params.vid
      // 区分网络还是满意度页面点击进来的详情
      // console.log(this.$route.params)
      this.pageType = this.$route.params.page
      this._getAreas()
      // 判断新老版本投票
      this.newold = this.$route.params.newold
    },
    components: {
      headTop
    },
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'LookVoteDetail' || from.name === 'VisitRecords') {
        next(vm => {
          vm.yuanValue = loadAreasName().yuan
          vm.zhuangValue = loadAreasName().zhuang
          vm.danyuanValue = loadAreasName().danyuan
          vm.did = loadAreasName().danyuanid
          vm.zid = loadAreasName().zhuangid
          vm.yid = loadAreasName().yuanid
          vm._getVote(vm.did)
        })
      } else {
        next(vm => {
          vm.yuanValue = ''
          vm.zhuangValue = ''
          vm.danyuanValue = ''
        })
      }
    },
    methods: {
      // 查看票数详情
      lookVoteDetail () {
        if (!this.danyuanValue) {
          Toast({
            message: '还未选择单元',
            position: 'middle',
            duration: 1000
          })
          return
        }
        this.$router.push(`/my/LookVoteDetail/${this.did}/${this.$route.params.vid}/${this.pageType}/${this.newold}`)
      },
      // 未投票选择按钮
      selectedVote (e, index) {
        // 为选中列时背景颜色为fff
        this.$refs['lit'][index].style.background = '#fff'
        this.selectIndex = index // 存放点击的index用于后面背景颜色的变化
        this.$refs['noVoteText' + index][0].style.color = '#0078de'
        this.$refs['noSendText' + index][0].style.color = '#666'
        this.$refs['noSend' + index][0].checked = false
        // 点击选中就把数据存放到数组里 并且字体和颜色也变化
        if (this.$refs['noVote' + index][0].checked) {
          this.emptyArr.push(index) // 存放到数组里
          // console.log(this.emptyArr)
          // 选中时该行的背景颜色为f2f2f2
          this.$refs['lit'][this.selectIndex].style.background = '#f2f2f2'
          this.$refs['noVoteText' + index][0].style.color = '#0078de'
          this.$refs['noVoteText' + index][0].innerHTML = '已投票'
          var dataStr = e.target.value
          var dataArr = dataStr.split('=').join('_').split('&')
          var data = []
          dataArr.forEach((item, index) => {
            data.push(item.split('_'))
          })
          for (var i = 0; i < data.length; i++) {
            this.selData[index] = data[i]
          }
        } else {
          // 没有选中时数组为空且颜色为fff
          this.emptyArr = []
          this.$refs['lit'][this.selectIndex].style.background = '#fff'
          this.$refs['noVoteText' + index][0].style.color = '#666'
          this.$refs['noVoteText' + index][0].innerHTML = '未投票'
          this.selData = []
        }
        if (!this.$refs['noSend' + index][0].checked) {
          this.$refs['noSendText' + index][0].innerHTML = '未送票'
        }
      },
      // 未送票选择按钮
      selectedSend (e, index) {
        // 未选中列时背景颜色为fff
        this.$refs['lit'][index].style.background = '#fff'
        this.selectIndex = index // 存放点击的index用于后期的背景颜色的变化
        this.$refs['noSendText' + index][0].style.color = '#0078de'
        this.$refs['noVoteText' + index][0].style.color = '#666'
        this.$refs['noVote' + index][0].checked = false
        if (this.$refs['noSend' + index][0].checked) {
          this.emptyArr.push(index) // 把点击的index存放到数组里
          // console.log(this.emptyArr)
          // 选择时列的背景颜色为f2f2f2
          this.$refs['lit'][this.selectIndex].style.background = '#f2f2f2'
          this.$refs['noSendText' + index][0].style.color = '#0078de'
          this.$refs['noSendText' + index][0].innerHTML = '已送票'
          var dataStr = e.target.value
          var dataArr = dataStr.split('=').join('_').split('&')
          var data = []
          dataArr.forEach((item, index) => {
            data.push(item.split('_'))
          })
          for (var i = 0; i < data.length; i++) {
            this.selData[index] = data[i]
          }
        } else {
          // 未选中时数组为空且背景颜色为fff
          this.emptyArr = []
          this.$refs['lit'][this.selectIndex].style.background = '#fff'
          this.$refs['noSendText' + index][0].style.color = '#666'
          this.$refs['noSendText' + index][0].innerHTML = '未送票'
          this.selData = []
        }
        if (!this.$refs['noVote' + index][0].checked) {
          this.$refs['noVoteText' + index][0].innerHTML = '未投票'
        }
      },
      // 未回收选择按钮
      selectedRecycle (e, index) {
        // 未选中时颜色为白色
        this.$refs['reli'][index].style.background = '#fff'
        this.selectIndex = index // 存放选中的index用于后面颜色的改变
        if (e.target.checked) {
          // 选中时把index存放到数组并且背景颜色为f2f2f2
          this.emptyArr2.push(index)
          // console.log(this.emptyArr2)
          this.$refs['reli'][this.selectIndex].style.background = '#f2f2f2'
          e.target.previousElementSibling.innerHTML = '已回收'
          e.target.previousElementSibling.style.color = '#0078de'
          var dataStr = e.target.value
          var dataArr = dataStr.split('=').join('_').split('&')
          var data = []
          dataArr.forEach((item, index) => {
            data.push(item.split('_'))
          })
          for (var i = 0; i < data.length; i++) {
            this.selData[index] = data[i]
          }
        } else {
          // 未选中时数组为空且背景颜色为fff
          this.emptyArr2 = []
          this.$refs['reli'][this.selectIndex].style.background = '#fff'
          e.target.previousElementSibling.innerHTML = '未回收'
          e.target.previousElementSibling.style.color = '#666'
          this.selData = [] // 没选中就清除数组的数据
        }
      },
      // 电话投票
      selectedPone (e, index) {
        // 未选中时背景颜色为fff
        this.$refs['poli'][index].style.background = '#fff'
        this.selectIndex = index // 存放选中的index用于后期颜色的改变
        if (e.target.checked) {
          // 选中时存放index到数组并且背景颜色为f2f2f2
          this.emptyArr3.push(index)
          // console.log(this.emptyArr3)
          this.$refs['poli'][this.selectIndex].style.background = '#f2f2f2'
          e.target.previousElementSibling.innerHTML = '已投票'
          e.target.previousElementSibling.style.color = '#0078de'
          var dataStr = e.target.value
          var dataArr = dataStr.split('=').join('_').split('&')
          var data = []
          dataArr.forEach((item, index) => {
            data.push(item.split('_'))
          })
          for (var i = 0; i < data.length; i++) {
            this.selData[index] = data[i]
          }
        } else {
          // 未选中时背景颜色为fff且数组为空
          this.emptyArr3 = []
          this.$refs['poli'][this.selectIndex].style.background = '#fff'
          e.target.previousElementSibling.innerHTML = '未投票'
          e.target.previousElementSibling.style.color = '#666'
          this.selData = [] // 没选中就清除数组的数据
        }
      },
      // 苑 幢 单元
      _getAreas () {
        getAreas(this.$route.params.aid, this.$route.params.id, this.$route.params.yid, this.$route.params.did, this.$route.params.stype).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.yuanList = res.data.yuan
            this.danyuanList = res.data.danyuan
            this.zhuangList = res.data.zhuang
            if (!this.yuanList.length) {
              this.$refs.weitoupiao.style.marginTop = 178 + 'px'
            } else {
              this.$refs.weitoupiao.style.marginTop = 222 + 'px'
            }
          }
        })
      },
      goyuan () {
        this.yuanVisible = true
      },
      gozhuang () {
        if (this.yuanList.length) {
          if (!this.yuanValue) {
            Toast({
              message: '请选择苑',
              position: 'middle',
              duration: 1000
            })
            return
          }
          this.zhuangVisible = true
        } else {
          this.zhuangVisible = true
        }
      },
      godanyuan () {
        if (!this.zhuangValue) {
          Toast({
            message: '请选择幢',
            position: 'middle',
            duration: 1000
          })
          return
        }
        this.danyuanVisible = true
      },
      selectYuan (id, name) {
        this.zhuangValue = ''
        this.danyuanValue = ''
        this.yid = id
        this.yuanValue = name
        this.yuanVisible = false
        this.noVote = []
        this.alreadyVote = []
      },
      selectZhuang (id, name) {
        this.danyuanValue = ''
        this.zid = id
        this.zhuangValue = name
        this.zhuangVisible = false
        this.noVote = []
        this.alreadyVote = []
      },
      selectDanyuan (id, name) {
        this.did = id
        this.danyuanValue = name
        this.danyuanVisible = false
        this.noVote = []
        this.alreadyVote = []
        this._getVote(this.did)
      },
      // 选择单元后显示投票结果
      _getVote (did) {
        const areasName = {
          yuan: this.yuanValue,
          zhuang: this.zhuangValue,
          danyuan: this.danyuanValue,
          danyuanid: this.did,
          zhuangid: this.zid,
          yuanid: this.yid
        }
        getVote(did, this.$route.params.vid, this.newold).then(res => {
          if (res.code === 200) {
            saveAreasName(areasName)
            this.noSend = res.data.voteService
            this.noVote = res.data.noVote // 未投票
            this.noRecycle = res.data.voteRecovery // 未回收
            this.yesVote = res.data.yesVote // 已投票
            // var everyLength = [this.noVote.length, this.noSend.length, this.noRecycle.length]
            var everyLength = [this.noVote.length, this.noRecycle.length, this.yesVote.length]
            this.dataList.forEach((item, index) => {
              this.$set(item, 'count', everyLength[index])
            })
            // 每列选项未被选中的时候文字和样式
            $('#form1 .wei-input1').prop('checked', false).prev().text('未投票')
            $('#form1 .wei-input2').prop('checked', false).prev().text('未送票')
            $('#form2 .wei-input').prop('checked', false).prev().text('未回收')
            $('#form3 .wei-input').prop('checked', false).prev().text('未投票')
            if (!$('.wei-input').prop('checked') || !$('.wei-input1').prop('checked') || !$('.wei-input2').prop('checked')) {
              $('.wei-input').prev().css({'color': '#888'})
              $('.wei-input1').prev().css({'color': '#888'})
              $('.wei-input2').prev().css({'color': '#888'})
            }
          }
        })
      },
      clickContent (index) {
        this.i = index
        if (!this.yuanList.length) {
          this.$refs.weiSend.style.marginTop = 178 + 'px'
          this.$refs.weiRecycle.style.marginTop = 178 + 'px'
        }
        $('#form1 .wei-input1').prop('checked', false).prev().text('未投票')
        $('#form1 .wei-input2').prop('checked', false).prev().text('未送票')
        $('#form2 .wei-input').prop('checked', false).prev().text('未回收')
        $('#form3 .wei-input').prop('checked', false).prev().text('未投票')
        if (!$('.wei-input').prop('checked') || !$('.wei-input1').prop('checked') || !$('.wei-input2').prop('checked')) {
          $('.wei-input').prev().css({'color': '#888'})
          $('.wei-input1').prev().css({'color': '#888'})
          $('.wei-input2').prev().css({'color': '#888'})
        }
      },
      // 提交按钮
      goSubmit () {
        // console.log(this.selData)
        if (this.selData.length === 0) {
          Toast({
            message: '还未选择已投票房间',
            position: 'middle',
            duration: 1000
          })
          return
        }
        // 提交完后背景颜色变成fff
        // 现场未投票
        for (var i = 0; i < this.emptyArr.length; i++) {
          // console.log(this.emptyArr[i])
          this.$refs['lit'][this.emptyArr[i]].style.background = '#fff'
        }
        // 现场未回收
        if (this.noRecycle.length !== 0) {
          for (var k = 0; k < this.emptyArr2.length; k++) {
            // console.log(this.emptyArr2[k])
            this.$refs['reli'][this.emptyArr2[k]].style.background = '#fff'
          }
        }
        // 电话投票
        for (var d = 0; d < this.emptyArr3.length; d++) {
          // console.log(this.emptyArr3[d])
          this.$refs['poli'][this.emptyArr3[d]].style.background = '#fff'
        }
        // 提交完后清空所有存放index的数组
        this.emptyArr = []
        this.emptyArr2 = []
        this.emptyArr3 = []
        submitVote(this.$route.params.aid, this.$route.params.vid, this.selData, this.newold).then(res => {
          if (res.code === 200) {
            Toast({
              message: '提交成功',
              position: 'middle',
              duration: 1000
            })
            this.selData = []
            this._getVote(this.did)
          }
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 1000
            })
            this._getVote(this.did)
          }
        })
      },
      // 刷新按钮
      refreshBtn () {
        this._getVote(this.did)
        this.selData = []
        Toast({
          message: '刷新成功！',
          position: 'middle',
          duration: 1000
        })
      }
    }
  }
</script>

<style lang="scss">
  .statistics-Detail {
    width: 100%;
    padding-top: 40px;
    background: #fff;
    .wei-color {
      color: #888;
      margin-right: 25px;
      margin-top: 15px;
    }
    .yi-color {
      margin-right: 25px;
    }
    .fixed {
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      z-index: 2;
    }
    .address {
      width: 100%;
      border-bottom: 10px solid #f2f2f2;
      background: #fff;
    }
    .wrapper {
      background: #fff;
      margin: 0 10px;
      /*display: inline-flex;*/
      height: 44px;
      line-height: 44px;
      width: 94%;
      .yuan, .danyuan, .zhuang {
        /*flex: 3;*/
        width: 93%;
        background: #fff;
        display: inline-table;
        span {
          &:first-child {
            font-size: 16px;
          }
          &:last-child {
            font-size: 14px;
            color: #666;
          }
          &.sdefault {
            font-size: 14px;
            color: #0078de;
          }
          &.sdefault1 {
            font-size: 14px;
            color: #0078de;
          }
        }
      }
      .img {
        width: 5%;
        background: #fff;
        display: inline-table;
        /*text-align: right;*/
        img {
          width: 10px;
          height: 18px;
          vertical-align: middle;
        }
      }
    }
    .toupiao-tongji {
      width: 100%;
      background: #fff;
      height: 35px;
      line-height: 35px;
      .text {
        width: 40%;
        float: left;
        padding-left: 10px;
      }
      .look-vote {
        width: 26%;
        float: right;
        color: #0078de;
      }
    }
    .toupiao-wrapper {
      width: 100%;
      padding-bottom: 44px;
      margin-top: 220px;
      -webkit-overflow-scrolling: touch;
      background: #fff;
      .tou-wrapper {
        width: 100%;
        background: #fff;
        height: 60px;
        display: inline-flex;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid #f3f3f3;
        .left {
          font-size: 14px;
          width: 40%;
          /*line-height: 60px;*/
        }
        .jilu{
          width: 50%;
          p{
            font-size: 14px;
            text-align: right;
            padding-top: 15px;
            margin-right: 10px;
            color: #0078de;
          }
          .right_box {
            width: 100%;
            font-size: 14px;
            display: inline-flex;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            justify-content: space-around;
            .right3 {
              font-size: 14px;
              text-align: right;
              position: relative;
              /*top: -42px;*/
              height: 44px;
              width:100%;
              input[type='checkbox'] {
                display: none
              }
              label {
                position: absolute;
                right: -8px;
                top: 12px;
              }
              label:before {
                content: '';
                position: absolute;
                left: -30px;
                top: 0;
                width: 16px;
                height: 16px;
                border: 1px solid #ddd;
                border-radius: 50%;
                transition: all 0.3s ease;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
              }
              label:after {
                content: '';
                position: absolute;
                left: -23px;
                top: 3px;
                width: 4px;
                height: 10px;
                border: 0;
                border-right: 1px solid #fff;
                border-bottom: 1px solid #fff;
                background: #fff;
                transform: rotate(45deg);
                transition: all 0.3s ease;
              }
              input[type='checkbox']:checked + label:before {
                background: #0087de;
                border-color: #0087de;
              }
              input[type='checkbox']:checked + label:after {
                background: #0087de;
              }
            }
          }

        }

      }
      .tou-wrapper2 {
        width: 100%;
        background: #fff;
        /*height: 60px;*/
        display: inline-flex;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid #f3f3f3;
        .left {
          font-size: 14px;
          width: 40%;
          /*line-height: 60px;*/
        }
        .jilu{
          width: 50%;
          p{
            font-size: 14px;
            text-align: right;
            padding-top: 15px;
            margin-right: 10px;
            color: #0078de;
          }
          .right_box {
            width: 100%;
            font-size: 14px;
            display: inline-flex;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            justify-content: space-around;
            .right {
              clear: both;
              font-size: 14px;
              text-align: right;
              position: relative;
              /*top: -42px;*/
              height: 40px;
              width: 47%;
              input[type='checkbox'] {
                display: none
              }
              label {
                position: absolute;
                right: -8px;
                top: 12px;
              }
              label:before {
                content: '';
                position: absolute;
                left: -30px;
                top: 0;
                width: 16px;
                height: 16px;
                border: 1px solid #ddd;
                border-radius: 50%;
                transition: all 0.3s ease;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
              }
              label:after {
                content: '';
                position: absolute;
                left: -23px;
                top: 3px;
                width: 4px;
                height: 10px;
                border: 0;
                border-right: 1px solid #fff;
                border-bottom: 1px solid #fff;
                /*background: #fff;*/
                transform: rotate(45deg);
                transition: all 0.3s ease;
              }
              input[type='checkbox']:checked + label:before {
                background: #0087de;
                border-color: #0087de;
              }
              input[type='checkbox']:checked + label:after {
                background: #0087de;
              }
            }
            .right2 {
              clear: both;
              font-size: 14px;
              text-align: right;
              position: relative;
              /*top: -42px;*/
              height: 40px;
              width: 47%;
              input[type='checkbox'] {
                display: none
              }
              label {
                position: absolute;
                right: -8px;
                top: 12px;
              }
              label:before {
                content: '';
                position: absolute;
                left: -30px;
                top: 0;
                width: 16px;
                height: 16px;
                border: 1px solid #ddd;
                border-radius: 50%;
                transition: all 0.3s ease;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
              }
              label:after {
                content: '';
                position: absolute;
                left: -23px;
                top: 3px;
                width: 4px;
                height: 10px;
                border: 0;
                border-right: 1px solid #fff;
                border-bottom: 1px solid #fff;
                background: #fff;
                transform: rotate(45deg);
                transition: all 0.3s ease;
              }
              input[type='checkbox']:checked + label:before {
                background: #0087de;
                border-color: #0087de;
              }
              input[type='checkbox']:checked + label:after {
                background: #0087de;
              }
            }
          }
          .right_box2 {
            width: 100%;
            font-size: 14px;
            display: inline-flex;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            justify-content: flex-end;
            .yi_right{
              display: inline-flex;
              display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              align-items: center;
              font-size: 14px;
              padding: 10px 10px 10px 0;
              span{
                margin-right: 5px;
              }
              img{
                width: 20px;
              }
            }
          }
        }

        .right3 {
          font-size: 14px;
          text-align: right;
          position: relative;
          /*top: -42px;*/
          height: 44px;
          width: 40%;
          input[type='checkbox'] {
            display: none
          }
          label {
            position: absolute;
            right: -8px;
            top: 12px;
          }
          label:before {
            content: '';
            position: absolute;
            left: -30px;
            top: 0;
            width: 16px;
            height: 16px;
            border: 1px solid #ddd;
            border-radius: 50%;
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
          }
          label:after {
            content: '';
            position: absolute;
            left: -23px;
            top: 3px;
            width: 4px;
            height: 10px;
            border: 0;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            background: #fff;
            transform: rotate(45deg);
            transition: all 0.3s ease;
          }
          input[type='checkbox']:checked + label:before {
            background: #0087de;
            border-color: #0087de;
          }
          input[type='checkbox']:checked + label:after {
            background: #0087de;
          }
        }
      }
    }
    .btn_list {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 44px;
      z-index: 2;
      background: rebeccapurple;
      .btn1 {
        width: 40%;
        height: 44px;
        background: #00c96c;
        float: left;
        border-radius: 0px;
        outline: none;
        color: #fff;
        font-size: 15px;

      }
      .btn2 {
        width: 60%;
        height: 44px;
        background: #0078de;
        border-radius: 0px;
        outline: none;
        color: #fff;
        font-size: 15px;
      }
    }

    .mint-popup {
      width: 60%;
      height: 200px;
      border-radius: 5px;
      ul {
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      .same {
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 15px;
      }
    }
    .nav {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-bottom: 2px solid #f2f2f2;
      background: #fff;
      li {
        width: 32.5%;
        /*width: 49%;*/
        text-align: center;
        font-size: 12.4px;
        display: inline-block;
        height: 100%;
        .text {
          display: inline-block;
          height: 100%;
          padding: 0 10px;
          border-bottom: 2px solid #0078de;
          color: #0078de;
          width: 84%;
        }
      }
    }
  }
</style>
